<template>
  <div class="container">
    <Navbar />
    
    <h1 class="page-title"><i class="fas fa-balance-scale"></i> 比较工具</h1>
    
    <!-- 比较类型选择 -->
    <div class="compare-type">
      <button 
        :class="{ active: compareType === 'car' }" 
        @click="compareType = 'car'"
      >
        <i class="fas fa-car"></i> 赛车比较
      </button>
      <button 
        :class="{ active: compareType === 'pet' }" 
        @click="compareType = 'pet'"
      >
        <i class="fas fa-paw"></i> 宠物比较
      </button>
    </div>
    
    <!-- 选择栏 -->
    <div class="compare-selection">
      <div class="selection-slot" v-for="(slot, index) in compareSlots" :key="index">
        <div v-if="!slot.selected" class="empty-slot" @click="openSelector(index)">
          <i class="fas fa-plus"></i>
          <div>添加{{ compareType === 'car' ? '赛车' : '宠物' }}</div>
        </div>
        <div v-else class="filled-slot">
          <div class="slot-img" :style="{ backgroundColor: slot.item.bgColor }">
            <div class="slot-badge">{{ compareType === 'car' ? slot.item.level : slot.item.rarity }}</div>
          </div>
          <div class="slot-info">
            <div class="slot-title">{{ slot.item.name }}</div>
            <div class="slot-type">{{ slot.item.type }}</div>
          </div>
          <button class="slot-remove" @click="removeItem(index)">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 比较结果 -->
    <div v-if="hasCompareItems" class="compare-results">
      <h2>性能对比</h2>
      
      <table class="compare-table">
        <thead>
          <tr>
            <th>属性</th>
            <th v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
              {{ slot.item.name }}
            </th>
          </tr>
        </thead>
        <tbody>
          <template v-if="compareType === 'car'">
            <tr>
              <td>平跑极速</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.speed }} km/h
              </td>
            </tr>
            <tr>
              <td>氮气极速</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.nitro }} km/h
              </td>
            </tr>
            <tr>
              <td>加速度</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.acceleration }}
              </td>
            </tr>
            <tr>
              <td>飘逸速率</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.drift }}%
              </td>
            </tr>
            <tr>
              <td>稳定性</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.stability }}%
              </td>
            </tr>
            <tr>
              <td>操控性</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.handling }}%
              </td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td>基础技能</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.basicSkill }}
              </td>
            </tr>
            <tr>
              <td>强化技能</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.enhancedSkill }}
              </td>
            </tr>
            <tr>
              <td>资质</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.quality }}
              </td>
            </tr>
            <tr>
              <td>战斗力</td>
              <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
                {{ slot.item.power }}
              </td>
            </tr>
          </template>
          <tr>
            <td>评分</td>
            <td v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected">
              <div class="rating-stars">
                <i class="fas fa-star"></i>
                <span>{{ slot.item.rating }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 性能雷达图 -->
      <div class="radar-chart">
        <h3>性能雷达图</h3>
        <div class="chart-placeholder">
          <!-- 这里可以引入实际的雷达图组件 -->
          <div class="radar-note">雷达图将展示各项属性的对比情况</div>
        </div>
      </div>
      
      <!-- 优缺点分析 -->
      <div class="analysis-section">
        <h3>优缺点分析</h3>
        <div v-for="(slot, index) in compareSlots" :key="index" v-if="slot.selected" class="analysis-item">
          <h4>{{ slot.item.name }}</h4>
          <div class="pros-cons">
            <div class="pros">
              <h5><i class="fas fa-thumbs-up"></i> 优点</h5>
              <ul>
                <li v-for="(pro, i) in getRandomPros(index)" :key="i">{{ pro }}</li>
              </ul>
            </div>
            <div class="cons">
              <h5><i class="fas fa-thumbs-down"></i> 缺点</h5>
              <ul>
                <li v-for="(con, i) in getRandomCons(index)" :key="i">{{ con }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择器弹窗 -->
    <div v-if="showSelector" class="selector-modal">
      <div class="selector-content">
        <div class="selector-header">
          <h3>选择{{ compareType === 'car' ? '赛车' : '宠物' }}</h3>
          <button @click="closeSelector"><i class="fas fa-times"></i></button>
        </div>
        
        <div class="selector-search">
          <input type="text" placeholder="搜索..." v-model="searchText">
        </div>
        
        <div class="selector-items">
          <div 
            v-for="(item, index) in filteredItems" 
            :key="index" 
            class="selector-item"
            @click="selectItem(item)"
          >
            <div class="selector-item-img" :style="{ backgroundColor: item.bgColor }"></div>
            <div class="selector-item-info">
              <div class="selector-item-name">{{ item.name }}</div>
              <div class="selector-item-type">{{ item.type }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 比较工具页组件
 * @component Compare
 */
import { ref, computed } from 'vue'
import Navbar from '../components/Navbar.vue'

// 比较类型（赛车/宠物）
const compareType = ref('car')
// 比较槽位
const compareSlots = ref([
  { selected: false, item: null },
  { selected: false, item: null },
  { selected: false, item: null }
])

// 搜索和选择器
const showSelector = ref(false)
const currentSlotIndex = ref(0)
const searchText = ref('')

// 计算是否有比较项
const hasCompareItems = computed(() => {
  return compareSlots.value.some(slot => slot.selected)
})

// 模拟赛车数据
const carData = [
  { 
    name: '雷诺特技车', 
    type: 'A车', 
    level: 'S级', 
    rating: '4.9', 
    ratingCount: '120', 
    bgColor: '#3a8bff',
    speed: 320,
    nitro: 380,
    acceleration: 95,
    drift: 90,
    stability: 85,
    handling: 80
  },
  { 
    name: '流星', 
    type: 'B车', 
    level: 'A级', 
    rating: '4.7', 
    ratingCount: '98', 
    bgColor: '#ff6b6b',
    speed: 300,
    nitro: 350,
    acceleration: 90,
    drift: 85,
    stability: 80,
    handling: 85
  },
  { 
    name: '剃刀', 
    type: 'A车', 
    level: 'A级', 
    rating: '4.6', 
    ratingCount: '87', 
    bgColor: '#20c997',
    speed: 310,
    nitro: 365,
    acceleration: 85,
    drift: 95,
    stability: 75,
    handling: 90
  },
  { 
    name: '魔鲨', 
    type: 'B车', 
    level: 'B级', 
    rating: '4.5', 
    ratingCount: '76', 
    bgColor: '#6f42c1',
    speed: 290,
    nitro: 340,
    acceleration: 80,
    drift: 80,
    stability: 90,
    handling: 75
  }
]

// 模拟宠物数据
const petData = [
  { 
    name: '小白龙', 
    type: '辅助型', 
    rarity: '传说', 
    rating: '4.9', 
    ratingCount: '135', 
    bgColor: '#fd7e14',
    basicSkill: '速度提升10%',
    enhancedSkill: '氮气持续时间延长20%',
    quality: 'S级',
    power: 950
  },
  { 
    name: '幻想猫', 
    type: '攻击型', 
    rarity: '稀有', 
    rating: '4.8', 
    ratingCount: '112', 
    bgColor: '#0dcaf0',
    basicSkill: '道具威力提升15%',
    enhancedSkill: '获得黄金道具概率提升10%',
    quality: 'A级',
    power: 850
  },
  { 
    name: '机械龟', 
    type: '防御型', 
    rarity: '普通', 
    rating: '4.6', 
    ratingCount: '89', 
    bgColor: '#20c997',
    basicSkill: '受击伤害减少20%',
    enhancedSkill: '自动抵挡一次攻击',
    quality: 'B级',
    power: 750
  },
  { 
    name: '幻翼天马', 
    type: '速度型', 
    rarity: '稀有', 
    rating: '4.7', 
    ratingCount: '104', 
    bgColor: '#e83e8c',
    basicSkill: '氮气速度提升8%',
    enhancedSkill: '直线加速度提升12%',
    quality: 'A级',
    power: 880
  }
]

// 根据当前比较类型过滤出相应数据
const filteredItems = computed(() => {
  const data = compareType.value === 'car' ? carData : petData
  if (!searchText.value) return data
  
  return data.filter(item => 
    item.name.includes(searchText.value) || 
    item.type.includes(searchText.value)
  )
})

// 打开选择器
const openSelector = (index) => {
  currentSlotIndex.value = index
  showSelector.value = true
}

// 关闭选择器
const closeSelector = () => {
  showSelector.value = false
}

// 选择项目
const selectItem = (item) => {
  compareSlots.value[currentSlotIndex.value] = {
    selected: true,
    item
  }
  closeSelector()
}

// 移除项目
const removeItem = (index) => {
  compareSlots.value[index] = {
    selected: false,
    item: null
  }
}

// 获取随机优点（模拟数据）
const getRandomPros = (index) => {
  const slot = compareSlots.value[index]
  
  if (compareType.value === 'car') {
    if (slot.item.type === 'A车') {
      return ['加速快', '操控性好', '适合多弯道赛道']
    } else {
      return ['性价比高', '稳定性好', '容易上手']
    }
  } else {
    if (slot.item.type === '攻击型') {
      return ['道具效果强', '适合道具赛', '伤害高']
    } else if (slot.item.type === '防御型') {
      return ['防御效果好', '生存能力强', '适合新手']
    } else {
      return ['提速效果明显', '氮气增益大', '适合竞速赛']
    }
  }
}

// 获取随机缺点（模拟数据）
const getRandomCons = (index) => {
  const slot = compareSlots.value[index]
  
  if (compareType.value === 'car') {
    if (slot.item.type === 'A车') {
      return ['价格昂贵', '不适合新手', '需要高技术熟练度']
    } else {
      return ['极速较低', '竞技比赛劣势明显', '氮气效果一般']
    }
  } else {
    if (slot.item.type === '攻击型') {
      return ['获取难度高', '升级消耗大', '无防御能力']
    } else if (slot.item.type === '防御型') {
      return ['速度提升有限', '攻击性弱', '不适合竞速']
    } else {
      return ['稀有度高难获取', '防御能力差', '对抗性弱']
    }
  }
}
</script>

<style scoped>
.page-title {
  font-size: 24px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.compare-type {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.compare-type button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: #f0f0f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-type button.active {
  background: #0078ff;
  color: white;
}

.compare-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.selection-slot {
  height: 150px;
}

.empty-slot {
  height: 100%;
  border: 2px dashed #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  color: #888;
}

.empty-slot i {
  font-size: 24px;
  margin-bottom: 10px;
}

.filled-slot {
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
}

.slot-img {
  width: 40%;
  position: relative;
}

.slot-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 12px;
}

.slot-info {
  flex: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slot-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
}

.slot-type {
  color: #666;
}

.slot-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.compare-results {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 40px;
}

.compare-results h2 {
  font-size: 20px;
  margin-bottom: 20px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.compare-table th, .compare-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.compare-table th {
  font-weight: bold;
  background: #f5f7fa;
}

.compare-table tr:hover {
  background: #f9f9f9;
}

.rating-stars {
  color: #ff9800;
  display: flex;
  align-items: center;
  gap: 5px;
}

.radar-chart {
  margin-bottom: 30px;
}

.radar-chart h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.chart-placeholder {
  height: 350px;
  background: #f5f7fa;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-note {
  color: #888;
}

.analysis-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
}

.analysis-item {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #eee;
}

.analysis-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.analysis-item h4 {
  margin-bottom: 15px;
  color: #333;
}

.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.pros h5, .cons h5 {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pros h5 {
  color: #28a745;
}

.cons h5 {
  color: #dc3545;
}

.pros ul, .cons ul {
  padding-left: 20px;
}

.pros li, .cons li {
  margin-bottom: 5px;
}

.selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.selector-content {
  width: 90%;
  max-width: 600px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.selector-header {
  padding: 15px 20px;
  background: #f5f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selector-header h3 {
  margin: 0;
}

.selector-header button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.selector-search {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.selector-search input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.selector-items {
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
}

.selector-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.selector-item:hover {
  background: #f5f7fa;
}

.selector-item-img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 15px;
}

.selector-item-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.selector-item-type {
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .pros-cons {
    grid-template-columns: 1fr;
  }
  
  .pros {
    margin-bottom: 20px;
  }
}
</style> 